<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>下拉菜单和滚动监听</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<style>
		#content {
			padding: 0 20px;
			height: 200px;
			overflow: auto; 
		}
	</style>
</head>
<body>
<!-- 
	1.声明式
		1)	data-toggle="dropdown" 				//对btn添加。点击文档区域或按esc关闭菜单
		注：如果按钮不在.dropdown内部，那么需要对.dropdown添加id,对外部按钮添加data-target="#id名称"
		
	2.jquery调用
		1)	$('#btn').dropdown(); 				//仍需要配合data-toggle="dropdown"
		2)	show-bs-dropdown 					//下拉菜单弹出之前弹出
			shown-bs-dropdown 					//下拉菜单弹出之后弹出
			hide-bs-dropdown 					//下拉菜单关闭之前弹出
			hidden-bs-dropdown 					//下拉菜单关闭之后弹出

	3.滚动监听									(以下 4 个都是对内容的容器.content添加)
		1)	第一种方法: 声明式
			1)	data-spy="scroll"
			2)	style="postion:relative"			//还需要相对定位，否则很多位置不匹配
			3)	data-offset="0" 					//默认值是10，固定内容距滚动容器10px以内，就高亮显示所对应的菜单,一般设置为0
			4)	data-target="#id名称" 				//绑定需要监听的对象，一般情况下还是建议加上

		2)	第二种方法：脚本式				( 都没有data- )
			$('#content').scrollspy({			//对#content使用。scrollspy方法
				offset : 0,
				target : '#nav' 				//导航栏的id
			})

		*)	新条目被激活(滚动条下拉看看)		//对#nav使用。是activate.bs.scrollspy不是activate-bs-scrollspy
			$('#nav').on('activate.bs.scrollspy', function () { 
				alert('新条目被激活');
			})

	3.滚动监听的刷新  : 更新DOM树,用于有对内容有添加或删除时
		1)	$('#content').scrollspy('refresh')
		
 -->



	<!-- <div class="dropdown">
		<button class="btn btn-primary" data-toggle="dropdown" id="btn">
			下拉菜单
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">首页</a></li>
			<li><a href="#">资讯</a></li>
			<li><a href="#">产品</a></li>
			<li><a href="#">关于</a></li>
		</ul>
	</div> -->

	<!-- 滚动监听 -->
	<nav class="nav navbar navbar-default" id="nav">
		<a href="#" class="navbar-brand">Web开发</a>
		<ul class="nav navbar-nav">
			<li><a href="#html5">HTML</a></li>
			<li><a href="#bootstrap">Bootsrap</a></li>
			<li class="dropdown">
				<a href="#" data-toggle="dropdown">Javascript <span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#jquery">JQuery</a></li>
					<li><a href="#yui">Yui</a></li>
					<li><a href="#extjs">ExtJS</a></li>
				</ul>
			</li>
		</ul>
	</nav>
	
	<!-- 配合最下方脚本语言使用
	<div id="content" style="position: relative;"> -->

	<!-- <div id="content" data-spy="scroll" style="position:relative" data-offset="0">            
		<h4 id="html5">HTML5</h4> 
		<p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。</p>
		<h4 id="bootstrap">Bootstrap</h4>
		<p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1]  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。[2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。</p>
		<h4 id="jquery">JQuery</h4>
		<p>JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。</p>
		<h4 id="yui">Yui</h4>
		<p>YUI 库，全称Yahoo! UI Library。是一组工具和控件，用JavaScript写成, 为的是用DOM 脚本，DHTML和AJAX等技术创建丰富的网页交互式应用程序。
YUI 基于BSD协议，对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具： YUI Compressor (压缩) 和 YUI Doc （JavaScripts代码的文档引擎）。</p>
		<h4 id="extjs">Extjs</h4>
		<p>自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。</p>
	</div> -->

	<!-- 刷新DOM的方法 -->
	<div data-spy="scroll" style="position: relative" data-offset="0" id="content">
		<section>
			<h4 id="html5">HTML5</h4>
			<p>111</p>
		</section>
		<section>
			<h4 id="bootstrap">Bootstrap <a href="javascript:void(0);" onclick="removeSec(this)">删除</a></h4>
			<p>222</p>
		</section>
		<section>
			<h4 id="jquery">JQuery</h4>
			<p>333</p>
		</section>
		<section>
			<h4 id="yui">Yui</h4>
			<p>444</p>
		</section>
		<section>
			<h4 id="extjs">ExtJS</h4>
			<p>555</p>
		</section>
	</div>

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
	<script>
		// $('#btn').dropdown();

		/*$('.dropdown').on('show.bs.dropdown', function () {
			alert('下拉菜单弹出之前弹出')
		})*/

		/*$('.dropdown').on('shown.bs.dropdown', function () {
			alert('下拉菜单弹出之后弹出')
		})*/

		/*$('.dropdown').on('hide.bs.dropdown', function () {
			alert('下拉菜单关闭之前弹出')
		})*/

		/*$('.dropdown').on('hidden.bs.dropdown', function () {
			alert('下拉菜单关闭之后弹出')
		})*/

		//滚动监听
		// 用脚本的方法书写( 没有data- )
		/*$('#content').scrollspy({				//对#content使用			
			offset : 0,
			target : '#nav'
		})*/

		// 新条目被激活
		/*$('#nav').on('activate.bs.scrollspy', function () {
			alert('新条目被激活');
		})*/

		// 更新DOM树
		function removeSec(e) {
			$(e).parents('section').remove()
			$('#content').scrollspy('refresh')
		}
	</script>
</body>
</html>